import { Image, View } from "@tarojs/components";
import Taro, { useDidShow } from "@tarojs/taro";
import { isEmpty } from "lodash";
import { useState } from "react";
import { AtAvatar, AtList, AtListItem } from "taro-ui";
// import back from "../../static/back.png";
import "./person.scss";

const Person = () => {
  const [user, setUser] = useState<any>();

  useDidShow(() => {
    // eslint-disable-next-line @typescript-eslint/no-shadow
    const user: any = Taro.getStorageSync("userInfo");
    if (!isEmpty(user)) {
      setUser(user);
    }
  });

  const submit = (value: number) => {
    // 1.著作权人  2.代理人
    if (value === 1) {
      Taro.navigateTo({
        url: "/pages/person/certification/certification?userType=" + value
      }).then();
    } else if (value === 2) {
      Taro.navigateTo({
        url: "/pages/person/application/application?userType=" + value
      }).then();
    }else if(value ===4){
      Taro.navigateTo({
        url: "/pages/person/collection/collection?userType=" + value
      }).then();
    }else if(value ===3){
      Taro.navigateTo({
        url: "/pages/person/purchase/purchase?userType=" + value
      }).then();
    }
  };
  // 实名认证页面跳转
  // const Certification=()=>{
  //   Taro.navigateTo({
  //     url: '/pages/person/certification/certification'
  //   })
  // }

  const handleClick = () => {
    Taro.redirectTo({
      url: "/pages/index/index"
    });
  };

  return (
    <View className="index">
      <View className="top">
        {isEmpty(user) ? (
          <AtAvatar circle text="游客" />
        ) : (
          <AtAvatar circle image={user.avatarUrl} />
        )}
        <View style={{ width: "20px" }} />
        {isEmpty(user) ? (
          <View className="at-article">游客</View>
        ) : (
          <View>{user.nickName}</View>
        )}
        {/* <View className="at-article">游客</View> */}
      </View>
      <View className="center">
        <View className="center-item">
          <View>0</View>
          <View>我的作品</View>
        </View>
        <View className="center-item">
          <View>0</View>
          <View>我的登记</View>
        </View>
      </View>
      <AtList hasBorder={false}>
        <AtListItem
          title="信息补充"
          arrow="right"
          hasBorder={false}
          onClick={() => submit(1)}
        />
        <AtListItem
          title="我的收藏"
          arrow="right"
          hasBorder={false}
          onClick={() => submit(4)}
        />
        <AtListItem
          title="我的申请"
          arrow="right"
          hasBorder={false}
          onClick={() => submit(2)}
        />
        <AtListItem
          title="我的购买"
          arrow="right"
          hasBorder={false}
          onClick={() => submit(3)}
        />
      </AtList>

      {/* <View className='button'>
        <Image className='img' src={back} onClick={handleClick}></Image> */}
      {/*<View className='back'>返回</View>*/}
      {/* </View> */}
    </View>
  );
};

export default Person;
